<template>
  <Modal
      :show="show"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
  >
    <ModalForm ref="form"></ModalForm>
  </Modal>
</template>

<script lang="ts">
export default {
  name: "UserModal"
}
</script>

<script setup lang="ts">
import {nextTick, onMounted, ref} from "vue"
import {UserAddType, UserListType} from '@/view/system/user/UserTypes'
import Modal from '@/components/Modal.vue'
import ModalForm from '@/components/ModalForm.vue'
import {ModalFormInitType} from '@/type/ModalFormType'
import {ums_user_save, ums_user_update} from '@/api/ums'
import useMsg from '@/hooks/useMsg'

const {success, error} = useMsg()

const form = ref<{
  init: (data: ModalFormInitType[]) => void
  validate: () => Promise<UserAddType>
}>()
const formData = ref<UserListType>()
const type = ref<0|1>(0)
const show = ref<boolean>(false)
const title = ref<string>('添加')

const emit = defineEmits<{
  (e: 'list'): void
}>()

const handleCancel = () => {
  show.value = false
}

const handleOk = () => {
  form.value?.validate().then(data => {
    if (type.value === 0) {
      ums_user_save(data).then(res =>{
        if (res.code === 200) {
          success(res.message)
          handleCancel()
          emit("list")
        }else {
          error(res.message)
        }
      })
    }
    if (type.value === 1) {
      ums_user_update({
        ...data,
        id: formData.value!.id
      }).then(res => {
        if (res.code === 200) {
          success(res.message)
          handleCancel()
          emit("list")
        }else {
          error(res.message)
        }
      })
    }
  })
}

function init (data?: UserListType) {
  if (data) {
    formData.value = data
    type.value = 1
    title.value = '编辑'
  }else {
    type.value = 0
    title.value = '添加'
    formData.value = undefined
  }
  show.value = true
  nextTick(() => {
    form.value?.init([
      {
        type: 'input',
        label: '账号',
        value: data?.username,
        key: 'username',
        rules: {
          required: true,
          trigger: 'change',
          message: '请输入登录账号'
        }
      },
      {
        type: 'input',
        label: '用户名',
        value: data?.nick_name,
        key: 'nick_name',
        rules: {
          required: true,
          trigger: 'change',
          message: '请输入用户名'
        }
      },
      {
        type: 'input',
        label: '电话',
        value: data?.user_phone,
        key: 'user_phone',
        rules: {
          required: true,
          trigger: 'change',
          message: '请输入电话'
        }
      },
      {
        type: 'input',
        label: '邮箱',
        value: data?.email,
        key: 'email',
        rules: {
          required: true,
          trigger: 'change',
          message: '请输入电话'
        }
      },
      {
        type: 'upload',
        label: '头像',
        value: data?.icon,
        key: 'icon',
        rules: {
          required: true,
          trigger: 'change',
          message: '请选择头像上传'
        }
      },
    ])
  })
}

defineExpose({
  init
})

onMounted( () => {
} )
</script>

<style scoped lang="scss">

</style>
